<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import {getMyOrderDetail , saveMyOrder} from "../api/myorder.js"
import {saveFlow} from "../api/flow.js"
import router from '@/router/index.js';


let route = useRoute()
let UserId = route.query.Userid //用户id
let ProId = route.query.ProId   //商品id
console.log(route.query.Userid )
console.log(route.query.ProId )


const addressList = ref([]) //地址列表
const myCouponDetailVOList = ref([]) //优惠券信息列表
const product = ref({}) //商品详情

let addressId = ref()//设置地址id
let receiveUsername = ref() //收件人姓名
let receiveUserTelno = ref()//收件人电话

let mycouponId = ref() //优惠券id
let couponPrice = ref(0) //优惠金额


onMounted(()=>{
    getOrderDetail()
})

async function getOrderDetail() {
    //拿数据
    const response =  await getMyOrderDetail(UserId,ProId);
    console.log(response)
    addressList.value  = response.data.data.addressList
    myCouponDetailVOList.value =  response.data.data.myCouponDetailVOList
    product.value =response.data.data.product
    //设置默认地址id
    if (addressList.value.length>0){
        addressId.value = addressList.value[0].addrId
        receiveUsername.value = addressList.value[0].receiveUsername
        receiveUserTelno.value = addressList.value[0].receiveUserTelno
        console.log("默认的地址id是:",addressId.value)
    }
    //设置默认优惠券id
    if(myCouponDetailVOList.value.length>0){
        mycouponId.value = myCouponDetailVOList.value[0].mycoupon.mycouId
        couponPrice.value = myCouponDetailVOList.value[0].coupon.couMoney
        // console.log(mycouponId.value)
        // console.log(couponPrice.value)
    }
}
//选中后的地址要进行修改
function changeAddress(){
    const selectAddress = addressList.value.find((address)=>address.addrId==addressId.value)
    receiveUsername.value = selectAddress.receiveUsername
    receiveUserTelno.value = selectAddress.receiveUserTelno
}
//选中优惠券，优惠券金额发生变化
function changeMyCoupon(){
    console.log("修改前")
    const selectMyCoupon  = myCouponDetailVOList.value.find((mycoupon)=>mycoupon.mycoupon.mycouId == mycouponId.value )
    console.log(selectMyCoupon)
    couponPrice.value = selectMyCoupon.coupon.couMoney
}
//订单金额的计算
const orderPrice = computed(()=>{return (product.value.proPrice *ProNumber.value )- couponPrice.value})

//数量加减
let ProNumber = ref(1) //商品数量
function increase() {
  ProNumber.value++
}
function decrease() {
  if(ProNumber.value>1)
    ProNumber.value--
}
//点击支付跳转到支付页面
function ToPay(){
    router.push(`/pay`)
}
//点击支付会先将订单添加到数据库
async function saveOrder(){
  const order={
      userId:UserId,
      productId : ProId,
      productName:product.value.proName,
      productPrice:product.value.proPrice,
      productImg:product.value.proImg,
      mycouponId:mycouponId.value,
      addressId:addressId.value,
      orderPrice:orderPrice.value,
  }
  console.log("订单详情")
  console.log(order)

  const response = await saveMyOrder(order)
  console.log("向订单表中插入的订单信息")
  console.log(response)

  // ----------------------------------
  if(response.data.code === 200){
    console.log("=================")
    const myorder = response.data.data //获得最新的订单对象
    console.log(myorder)
    saveNewFlow(myorder)
  }
}
//调用支付，添加流水
async function saveNewFlow(myorder) {
    const res = await saveFlow(myorder)
    console.log(res)
    const div = document.createElement('div')

    div.innerHTML = res.data
    document.body.appendChild(div)
    //自动提交表单，跳转到支付宝
    document.forms[0].submit()
}

</script>

<template>
  <div class="content">
    <div>
        <h2>订单确认</h2>
        <div class="product-info">
            <img :src="`${product.proImg}`" alt="商品图片">
        <div class="product-details">
            <p><Strong>名称：{{ product.proName }}</Strong></p>
            <p><Strong>描述：{{ product.proDesc }}</Strong></p>
            <p><Strong>价格：{{ product.proPrice }}</Strong></p>
            <div class="quantity">
                <button @click="decrease">-</button>
                <input type="text" v-model="ProNumber">
                <button @click="increase">+</button>
            </div>
        </div>
    </div>

        <div>
             <h2>收件地址信息</h2>
             <p>
                收件人姓名：{{ receiveUsername }}
                收件人手机号：{{ receiveUserTelno }}
             </p>
             <select name="" id="" v-model="addressId" @change="changeAddress">
                <option  v-for="address in addressList" :key="address.addrId" :value="address.addrId">
                    {{ address.addrProvince }}
                    {{ address.addrCity }}
                    {{ address.addrArea }}
                    {{ address.addrDetail }}
                </option>
             </select>
        </div>
        <div>
            <h2>优惠券</h2>
            <select name="" id="" v-model="mycouponId" @change="changeMyCoupon">
                <option v-for="Vo in myCouponDetailVOList" :key="Vo.mycoupon.mycouId" :value="Vo.mycoupon.mycouId">
                    {{ Vo.coupon.couName }} 
                </option>
            </select>
        </div>
        <div>
            <p>已选优惠券:减{{ couponPrice }}元</p>
            <p>订单金额:</p>
            <p><span>￥{{ orderPrice }}</span></p>
        </div>
        <div>
            <button class="pay-btn" @click="saveOrder">去支付</button>
        </div>
    </div>
  </div>  
</template>


<style scoped>

.content{
  margin-top: 10px;
}
/* 页面整体 */
div {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;

}

/* 页面标题 */
h2 {
  margin: 16px 0;
  font-size: 20px;
  font-weight: bold;
  color: #2c3e50;
}

/* 每个模块卡片 */
div > div {
  background: #fff;
  padding: 16px;
  margin: 12px 0;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* 商品信息布局：左右两栏 */
.product-info {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* 商品图片 */
.product-info img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #eee;
}

/* 商品文字部分 */
.product-details {
  flex: 1;
}
.product-details p {
  margin: 8px 0;
  font-size: 14px;
  color: #555;
}
.product-details strong {
  font-size: 16px;
  color: #333;
}

/* 数量选择器 */
.quantity {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.quantity button {
  width: 32px;
  height: 32px;
  border: none;
  background: #409eff;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}
.quantity button:hover {
  background: #66b1ff;
}
.quantity input {
  width: 50px;
  height: 32px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin: 0 8px;
}

/* 下拉框 */
select {
  width: 100%;
  padding: 8px 12px;
  margin-top: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
select:focus {
  border-color: #409eff;
  background: #fff;
}

/* 金额部分 */
span {
  font-size: 20px;
  font-weight: bold;
  color: #e63946;
}

/* 支付按钮 */
.pay-btn {
  width: 100%;
  padding: 12px;
  margin-top: 16px;
  background: linear-gradient(135deg, #409eff, #66b1ff);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}
.pay-btn:hover {
  background: linear-gradient(135deg, #66b1ff, #409eff);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

</style>
